var pieChartOption = function (progress) {
    var isup = progress.trend ? (progress.trend == 1 ? '\n{a|▲}' : '\n{b|▼}') : ''
    return {
        animation: true,
        color: progress.color,
        title: {
            text: progress.value + '%' + isup,
            x: 'center',
            y: progress.trend ? '38%' : 'center',
            textStyle: {
                fontWeight: 'bolder',
                fontSize: 24,
                color: progress.color,
                rich: {
                    a: {
                        color: 'red',
                        fontSize: 24,
                    },
                    b: {
                        color: 'green',
                        fontSize: 24
                    }
                }
            },
        },

        series: [{
            //最外大圆
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['98%', '100%'],
            labelLine: {
                normal: {
                    show: false
                }
            },
            hoverAnimation: false,
            data: [{
                value: 100
            }]
        }, {
            //第二层圆
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['89%', '92%'],
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                opacity: 0.5
            },
            hoverAnimation: false,
            data: [{
                value: 100
            }]
        }, {
            // 进度条
            type: 'pie',
            center: ['50%', '50%'], //圆心坐标（div中的%比例）
            radius: ['80%', '100%'], //半径
            labelLine: {
                normal: {
                    show: false
                }
            },
            hoverAnimation: false,
            data: [{
                value: Math.abs(progress.value), // 值
            }, {
                value: 100 - Math.abs(progress.value), // 剩余值
                itemStyle: {
                    color: 'rgba(0,0,0,0)' // 设置透明度隐藏
                }
            }]
        }]
    }
}

var renderChart13 = function (data) {
    var pieChart13 = echarts.init(document.getElementById('chart13'));
    pieChart13.clear()
    pieChart13.setOption(pieChartOption(data));
    // pieChart13.setOption(option)
}
var renderChart18 = function (data) {
    var pieChart18 = echarts.init(document.getElementById('chart18'));
    pieChart18.clear()
    pieChart18.setOption(pieChartOption(data));
}
var renderChart19 = function (data) {
    var pieChart19 = echarts.init(document.getElementById('chart19'));
    pieChart19.clear()
    pieChart19.setOption(pieChartOption(data));
}
var renderChart23 = function (data) {
    var pieChart23 = echarts.init(document.getElementById('chart23'));
    pieChart23.clear()
    pieChart23.setOption(pieChartOption(data));
}


var renderChart6 = function (odata) {
    var data = odata.reverse()
    var formatD = function () {
        // 计算百分比
        var rs = []
        data.forEach(function (data) {
            var val = data.closeorder / data.Allorder * 100 > 100 ? 100 : data.closeorder / data.Allorder * 100
            rs.push({
                value: val,
                or: data
            })
        })
        return rs
    }
    var formatR = function () {
        // 计算剩余百分比
        var rs = []
        data.forEach(function (data) {
            rs.push({
                value: 100,
                or: data
            })
        })
        return rs
    }
    var formatLabel = function () {
        var rs = []
        data.forEach(function (data) {
            rs.push({
                value: 0,
                or: data
            })
        })
        return rs
    }
    var formatN = function () {
        // 返回Y轴名字
        var rs = []
        data.forEach(function (data) {
            rs.push({
                value: data.Name + '(月)',
                or: data
            })
        })
        return rs
    }
    var chart6option = {
        color: ['#7ac6de'],
        title: {
            text: '已处理/总量(月)',
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        },
        xAxis: {
            axisLine: {
                show: false
            },
            boundaryGap: true,
            splitLine: { //网格线
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            label: {
                show: false
            }
        },
        yAxis: [{
            type: 'category',
            data: formatN(),
            axisLine: {
                show: false
            },
            axisTick: { //y轴刻度线
                show: false
            },
            splitLine: { //网格线
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 14
            },
        }],
        grid: {
            top: 20,
            right: 160,
            bottom: 10,
        },
        series: [{
            type: 'bar',
            stack: 'total1',
            barGap: '-100%',
            barWidth: 26,
            silent: true,
            color: 'rgba(255,255,255, .1)',
            itemStyle: {
                normal: {
                    barBorderRadius: 6,
                }
            },
            data: formatR()
        }, {
            type: 'bar',
            stack: 'total',
            barWidth: 26,
            itemStyle: {
                normal: {
                    barBorderRadius: 6,
                }
            },
            label: {
                color: '#fff',
                show: true,
                position: 'insideRight',
                formatter: function (item) {
                    var per = item.data.or.closeorder / item.data.or.Allorder * 100
                    return per.toFixed(2) + '%'
                }
            },
            data: formatD()
        }, {
            type: 'bar',
            stack: 'total1',
            barWidth: 26,
            color: 'rgba(255,255,255, 0)',
            label: {
                color: '#fff',
                show: true,
                position: 'right',
                formatter: function (item) {
                    var per = item.data.or.closeorder / item.data.or.Allorder * 100
                    var v = '     {a|' + item.data.or.closeorder + '} / ' + item.data.or.Allorder
                    return v
                },
                rich: {
                    a: {
                        color: '#6aaae1'
                    }
                }
            },
            data: formatLabel()
        }]
    };
    // console.log(chart6option)

    // chart6option = {
    //     "color": ["#7ac6de"],
    //     "title": {
    //         "text": "横柱状",
    //         "textStyle": {
    //             "color": ""
    //         }
    //     },
    //     "xAxis": {
    //         "axisLine": {
    //             "show": false
    //         },
    //         "boundaryGap": true,
    //         "splitLine": {
    //             "show": false
    //         },
    //         "axisTick": {
    //             "show": false
    //         },
    //         "axisLabel": {
    //             "show": false
    //         },
    //         "label": {
    //             "show": false
    //         }
    //     },
    //     "yAxis": [{
    //         "type": "category",
    //         "data": ["合肥市", "保定市", "临沂市", "乌鲁木齐市", "包头市", "东营市", "南京市", "三门峡市", "兰州市", "北京市"],
    //         "axisLine": {
    //             "show": false
    //         },
    //         "axisTick": {
    //             "show": false
    //         },
    //         "splitLine": {
    //             "show": false
    //         },
    //         "axisLabel": {
    //             "color": "",
    //             "fontSize": 14
    //         }
    //     },{
    //         "type": "category",
    //         "data": ["7 / 8", "10 / 40", "21 / 80", "1 / 8", "293321 / 2029333", "38111 / 2229333", "30293 / 888888", "29123 / 223333", "32223 / 11111111", "22222 / 77777777"],
    //         "axisLine": {
    //             "show": false
    //         },
    //         "axisTick": {
    //             "show": false
    //         },
    //         "splitLine": {
    //             "show": false
    //         },
    //         "axisLabel": {
    //             "color": "",
    //             "fontSize": 14
    //         }
    //     }],
    //     "grid": {
    //         "top": 20,
    //         "right": 160,
    //         "bottom": 10
    //     },
    //     "series": [{
    //         "type": "bar",
    //         "stack": "total1",
    //         "barGap": "-100%",
    //         "barWidth": "auto",
    //         "silent": true,
    //         "color": "rgba(255,255,255, .1)",
    //         "itemStyle": {
    //             "normal": {
    //                 "barBorderRadius": 6
    //             }
    //         },
    //         "data": [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
    //     }, {
    //         "type": "bar",
    //         "stack": "total",
    //         "barWidth": "auto",
    //         "itemStyle": {
    //             "normal": {
    //                 "barBorderRadius": 6
    //             }
    //         },
    //         "label": {
    //             "color": "",
    //             "show": true,
    // 			"position": "insideRight",
    // 			"formatter": "{c}%"
    //         },
    //         "data": [100.0, 59.0, 56.0, 46.0, 38.0, 54.0, 60.0, 61.0, 49.0, 73.0]
    //     }]
    // }

    var chart6 = echarts.init(document.getElementById("chart6"));
    chart6.setOption(chart6option, true);
}

// 标签云
var app = new Vue({
    el: '#stage',
    data: {
        width: 860,
        height: 260,
        RADIUS: 110,
        speedX: Math.PI / 360,
        speedY: Math.PI / 360,
        colors: ['#e86e6e', '#c8b566', '#6ee8bf', '#7e6654', '#6eafe8'],
        tags: [],
        playtime: 0,
        playtimeout: null,

        tableColumn: [],
        tableDate: [],
        wapper: null,
        top: 0,
        height: 0,
        table: null,
        timeout: null
    },
    computed: {
        CX() {
            return this.width / 2;
        },
        CY() {
            return this.height / 2;
        }
    },
    methods: {
        init() {
            var tags = [];
            var colors = ['#e86e6e', '#c8b566', '#6ee8bf', '#7e6654', '#6eafe8']
            for (var i = 0; i < this.tags.length; i++) {
                var tag = {};
                var k = -1 + (2 * (i + 1) - 1) / this.tags.length;
                var a = Math.acos(k);
                var b = a * Math.sqrt(this.tags.length * Math.PI);
                tag = {
                    Name: this.tags[i].Name,
                    text: this.tags[i].Name,
                    x: this.CX + this.RADIUS * Math.sin(a) * Math.cos(b) * 3.6,
                    y: this.CY + this.RADIUS * Math.sin(a) * Math.sin(b) + this.RADIUS + 20,
                    z: this.RADIUS * Math.cos(a) * 3.6,
                }
                switch (i) {
                    case 0:
                        tag.size = 40;
                        break;
                    case 1:
                        tag.size = 36;
                        break;
                    case 2:
                        tag.size = 30;
                        break;
                    default:
                        tag.size = 24;
                        break;
                }
                tags.push(tag)
            }
            this.tags = tags;
            this.playtimeout = setInterval(() => {
                this.rotateX(this.speedX);
                this.rotateY(this.speedY);
            }, 60)
        },
        rotateX(angleX) {
            this.playtime++
            var cos = Math.cos(angleX);
            var sin = Math.sin(0);
            for (let tag of this.tags) {
                var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
                var z1 = tag.z * cos + (tag.y - this.CY) * sin;
                tag.y = y1;
                tag.z = z1;
            }
        },
        rotateY(angleY) {
            var cos = Math.cos(angleY);
            var sin = Math.sin(angleY);
            for (let tag of this.tags) {
                var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
                var z1 = tag.z * cos + (tag.x - this.CX) * sin;
                tag.x = x1;
                tag.z = z1;
            }
        },
        initRoll() {
            let wapper = this.$refs.charttable.$el.children[2];
            wapper.style.position = 'relative'
            this.wapper = wapper;
            this.table = this.wapper.children[0];
            this.table.style.position = 'absolute'
            this.height = this.table.offsetHeight;
            wapper.style.height = this.height + 'px'
            let tabelHTML = this.wapper.children[0].children[1].innerHTML;
            this.wapper.children[0].children[1].innerHTML = tabelHTML + tabelHTML;
            this.tableAutoRoll();
        },
        tableAutoRoll() {
            this.table.style.top = -this.top + 'px';
            if (this.top < this.height) {
                this.top++;
            } else {
                this.top = 0;
                this.wapper.scrollTop = 0;
            }
            const vm = this;
            vm.timeout = setTimeout(vm.tableAutoRoll, 50);
        },
    },

    watch: {
        tableDate(n, o) {
            if (n.length == 0) {
                this.wapper = null
                this.table = null
                this.top = 0
                this.height = 0
                clearTimeout(this.timeout)
            }
        }
    }
})


//环
var mTime = null
var renderChart25 = function (data) {
    console.log(data)
    if (mTime) clearInterval(mTime)
    var up = [],
        down = [],
        cell = data.names.length / 2
    for (var i = 0; i < data.names.length; i++) {
        if (i < cell) {
            up.push(data.names[i])
        } else {
            down.push(data.names[i])
        }
    }

    var option = {
        title: {
            text: data.title,
            textStyle: {
                color: '#fff'
            },
            left: 'center'
        },
        color: ['#1bc75c', '#00a0e8', '#496183', '#ce595f'],
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: [{
            // orient: 'vertical',
            x: 'center',
            y: '85%',
            data: up,
            textStyle: {
                color: '#fff'
            },
        }, {
            // orient: 'vertical',
            x: 'center',
            y: 'bottom',
            data: down,
            textStyle: {
                color: '#fff'
            },
        }],
        series: [{
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['65%', '85%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    color: '#fff',
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data.values
        }]
    };
    var pieChart25 = echarts.init(document.getElementById('chart25'));
    pieChart25.setOption(option);
    var index = 0;
    mTime = setInterval(function () {
        pieChart25.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index
        });
        pieChart25.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index
        });
        pieChart25.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index - 1 >= 0 ? index - 1 : data.values.length - 1
        });
        index++;
        if (index >= data.values.length) {
            index = 0;
        }
    }, 2500);
}
